<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>go-chat 聊天室</title>
    <link
      rel="stylesheet"
      href="//s2.pstatp.com/cdn/expire-1-M/twitter-bootstrap/3.3.5/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="/static/rolling/css/rolling.css" />
    <link rel="stylesheet" href="/static/stylesheets/style.css" />
    <link rel="stylesheet" href="/static/emoji/emojionearea.min.css" />
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
  </head>
  <body
    id="body-room"
    class="room"
    data-uid="{{ .user_info.uid }}"
    data-username="{{ .user_info.username }}"
    data-avatar_id="{{ .user_info.avatar_id }}"
    data-room_id="{{ .room_id }}"
  >
    <div class="scrollbar-macosx">
      <div class="header">
        <div class="toptext">
          <a href="/home">
            <span class="glyphicon glyphicon-arrow-left"></span> 返回大厅
          </a>
        </div>

        <ul class="topnavlist">
          <li class="userlist">
            <a class="a-user-list"
              ><span class="glyphicon glyphicon-th-list"></span>用户列表</a
            >
            <div class="popover fade bottom in">
              <div class="arrow"></div>
              <h3 class="popover-title">在线用户 1 人</h3>
              <div class="popover-content scrollbar-macosx">
                <ul class="ul-user-list">
                  <li>
                    <img src="/static/images/user/12.png" alt="portrait_1" />
                    <b>美国队长</b>
                  </li>
                </ul>
              </div>
            </div>
          </li>

          <li><a class="_logout" href="javascript:;"> 退出登录 </a></li>
        </ul>
        <div class="clapboard hidden"></div>
      </div>
      <div id="mescroll" class="main container mescroll">
        <div class="col-md-12">
          <ul class="chat_info">
            <li id="chat-list-li-top" class="systeminfo">
              <span style="cursor: pointer"> 提示：点击加载更多消息 </span>
            </li>

            <li
              id="hidden-chat-list-li-top"
              data-offset="100"
              data-list-cout="{{ .msg_list_count }}"
              style="display: none"
            ></li>

            {{$uid:= .user_info.uid}} {{$nullSrl:= ""}} {{range .msg_list}} {{if
            eq $uid .user_id}}

            <li class="right">
              <img src="/static/images/user/{{ .avatar_id }}.png" alt="" data-uid="{{ .user_id }}" data-username="{{ .username }}" data-avatar_id="{{ .avatar_id }}" data-room_id="{{ .room_id }}" class="chat-avatar"/>
              <b>{{ .username }}</b>
              <i>{{ .created_at }}</i>

              {{ if eq .image_url $nullSrl }}

              <div>{{ .content }}</div>
              {{else}}
              <div>
                <img
                  class="load-img"
                  data-src="{{ .image_url }}"
                  src="https://cdn.jsdelivr.net/gh/hezhizheng/static-image-hosting@master/image-hosting/20210420094013_LVZYIITUUVRWREEE.jpg"
                />
              </div>
              {{end}}
            </li>

            {{else}}

            <li class="left">
              <img src="/static/images/user/{{ .avatar_id }}.png" alt="" data-uid="{{ .user_id }}" data-username="{{ .username }}" data-avatar_id="{{ .avatar_id }}" data-room_id="{{ .room_id }}" class="chat-avatar"/>
              <b>{{ .username }}</b>
              <i>{{ .created_at }}</i>
              {{ if eq .image_url $nullSrl }}

              <div>{{ .content }}</div>
              {{else}}
              <div>
                <img
                  class="load-img"
                  data-src="{{ .image_url }}"
                  src="https://cdn.jsdelivr.net/gh/hezhizheng/static-image-hosting@master/image-hosting/20210420094013_LVZYIITUUVRWREEE.jpg"
                />
              </div>
              {{end}}
            </li>

            {{end}} {{end}}
          </ul>
        </div>
      </div>
      <div class="input">
        <div class="center">
          <div class="tools">
            <span class="glyphicon glyphicon-picture imgFileico"></span>

            <input type="file" class="imgFileBtn hidden" accept="image/*" />
          </div>
          <div class="text">
            <div class="col-xs-12 col-sm-12">
              <input
                type="text"
                id="emojionearea2"
                placeholder="输入聊天信息..."
              />
            </div>
          </div>
          <div class="_submit">
            <div class="col-xs-12 col-sm-12 text-right">
              <a id="subxx" role="button"
                ><span class="glyphicon glyphicon-share-alt"></span
              ></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script
    type="text/javascript"
    src="//s2.pstatp.com/cdn/expire-1-M/jquery/1.11.2/jquery.min.js"
  ></script>
  <script
    type="text/javascript"
    src="//s2.pstatp.com/cdn/expire-1-M/twitter-bootstrap/3.3.5/js/bootstrap.min.js"
  ></script>
  <script type="text/javascript" src="/static/rolling/js/rolling.js"></script>
  <script
    type="text/javascript"
    src="/static/javascripts/websocket-heartbeat.js"
  ></script>
  <script
    type="text/javascript"
    src="/static/javascripts/Public.js?t=31245345345345"
  ></script>
  <script
    type="text/javascript"
    src="/static/emoji/emojionearea.min.js"
  ></script>
  <script
    type="text/javascript"
    src="//s2.pstatp.com/cdn/expire-1-M/layer/3.1.1/layer.min.js"
  ></script>
  <script
    type="text/javascript"
    src="/static/javascripts/load-msg-more.js?t=2"
  ></script>

  <script>

    $(document).ready(function () {
        // WebSocketConnect

        let userInfo = {
            uid : {{ .user_info.uid }},
            username : {{ .user_info.username }},
            room_id : {{ .room_id }},
            avatar_id : {{ .user_info.avatar_id }},
        }
        WebSocketConnect(userInfo)

        // 滚动到底部
        toLow();
    });
  </script>

  <script>
    $(document).on("click", ".li-user-item", function (e) {
      let uid = $(this).attr("data-uid");
      let username = $(this).attr("data-username");
      let room_id = $(this).attr("data-room_id");
      let avatar_id = $(this).attr("data-avatar_id");

      let toUser = JSON.stringify({
        uid: uid,
        room_id: room_id,
        avatar_id: avatar_id,
        username: username,
      });

      let content =
        "/private-chat?uid=" +
        uid +
        "&room_id=" +
        room_id +
        "&avatar_id=" +
        avatar_id +
        "&username=" +
        username;

      layer.open({
        type: 2,
        title: "与 " + username + " 聊天中",
        content: content,
        area: ["100%", "100%"],
        success: function (layero, index) {
          var body = layer.getChildFrame("body", index);
          //var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：

          ws.onmessage = function (evt) {
            var received_msg = JSON.parse(evt.data);
            let time = _time(received_msg.data.time);
            // console.log("private ",received_msg)
            if (received_msg.status == 5 && received_msg.data.uid == uid) {
              body
                .find(".main .chat_info")
                .html(
                  body.find(".main .chat_info").html() +
                    '<li class="left"><img src="/static/images/user/' +
                    received_msg.data.avatar_id +
                    '.png" alt=""><b>' +
                    received_msg.data.username +
                    "</b><i>" +
                    time +
                    '</i><div class="aaa">' +
                    received_msg.data.content +
                    "</div></li>"
                );
            } else if (received_msg.status == 5) {
              layer.msg(
                received_msg.data.username + "：" + received_msg.data.content
              );
            }
          };
        },
        cancel: function () {
          parent.location.reload(); //TODO 暂时使用刷新解决，关闭iframe窗口 会触发一次 websocket 发送 接着直接关闭了连接
        },
      });

      // console.log("send toUser",toUser,content)
    });
    
    // 点击聊天记录中的头像发起私聊
    $(document).on("click", ".chat-avatar", function (e) {
      let uid = $(this).attr("data-uid");
      let currentUid = $("#body-room").attr("data-uid");
      
      // 不允许自己和自己私聊
      if (uid === currentUid) {
        return;
      }
      
      let username = $(this).attr("data-username");
      let room_id = $(this).attr("data-room_id");
      let avatar_id = $(this).attr("data-avatar_id");
      
      // 复用已有的私聊功能代码
      let content =
        "/private-chat?uid=" +
        uid +
        "&room_id=" +
        room_id +
        "&avatar_id=" +
        avatar_id +
        "&username=" +
        username;

      layer.open({
        type: 2,
        title: "与 " + username + " 聊天中",
        content: content,
        area: ["100%", "100%"],
        success: function (layero, index) {
          var body = layer.getChildFrame("body", index);

          ws.onmessage = function (evt) {
            var received_msg = JSON.parse(evt.data);
            let time = _time(received_msg.data.time);
            if (received_msg.status == 5 && received_msg.data.uid == uid) {
              body
                .find(".main .chat_info")
                .html(
                  body.find(".main .chat_info").html() +
                    '<li class="left"><img src="/static/images/user/' +
                    received_msg.data.avatar_id +
                    '.png" alt=""><b>' +
                    received_msg.data.username +
                    "</b><i>" +
                    time +
                    '</i><div class="aaa">' +
                    received_msg.data.content +
                    "</div></li>"
                );
            } else if (received_msg.status == 5) {
              layer.msg(
                received_msg.data.username + "：" + received_msg.data.content
              );
            }
          };
        }
      });
    });
  </script>

  <script>
    $("#emojionearea2").emojioneArea({
      pickerPosition: "top",
      tonesStyle: "radio",
      events: {
        keyup: function (editor, event) {
          if (event.which == 13) {
            $("#subxx").click();
          }
        },
      },
    });
  </script>

  <script>
    $("._logout").click(function () {
      clearCookie();
      window.location.assign("/");
      // window.location.href = '/';
    });

    function foreach() {
      var strCookie = document.cookie;
      var arrCookie = strCookie.split("; ");
      for (var i = 0; i < arrCookie.length; i++) {
        var arr = arrCookie[i].split("=");
        if (arr.length > 0) DelCookie(arr[0]);
      }
    }
    function GetCookieVal(offset) {
      var endstr = document.cookie.indexOf(";", offset);
      if (endstr == -1) endstr = document.cookie.length;
      return decodeURIComponent(document.cookie.substring(offset, endstr));
    }
    function DelCookie(name) {
      var exp = new Date();
      exp.setTime(exp.getTime() - 1);
      var cval = GetCookie(name);
      document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
    }
    function GetCookie(name) {
      var arg = name + "=";
      var alen = arg.length;
      var clen = document.cookie.length;
      var i = 0;
      while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) return GetCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
      }
      return null;
    }
    function clearCookie() {
      var date = new Date();
      date.setTime(date.getTime() - 10000);
      var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
      if (keys) {
        for (var i = keys.length; i--; )
          document.cookie =
            keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
      }
    }
  </script>
</html>
